<template>
	<div class="home">
		<h1>注册账号</h1>
		<van-form @submit="onSubmit">
			<van-field
				v-model="username"
				name="昵称"
				label="昵称"
				placeholder="请输入昵称"
				:rules="[{ required: true}]"
			/>
			<van-field
				v-model="phone"
				type="tel"
				name="手机号"
				label="手机号"
				placeholder="请输入手机号"
				:rules="[{ required: true}]"
			>
				<template #button>
					<van-button size="mini" @click="getCode">{{count}}发送验证码</van-button>
				</template>
			</van-field>
			<van-field
				v-model="code"
				type="text"
				name="验证码"
				label="验证码"
				placeholder="请输入验证码"
				:rules="[{ required: true}]"
			/>
			<van-field
				v-model="password"
				type="password"
				name="密码"
				label="密码"
				placeholder="请输入密码"
				:rules="[{ required: true}]"
			/>
			<van-field
				v-model="repwd"
				type="password"
				name="确认密码"
				label="确认密码"
				placeholder="请再次输入密码"
				:rules="[{ required: true}]"
			/>
			<van-field
				v-model="yqm"
				type="text"
				name="邀请码"
				label="邀请码"
				placeholder="请输入邀请码"
			/>
  			<div style="margin: 16px;">
				<van-button 
				:loading="loading"
				round 
				block 
				type="info" 
				native-type="submit" 
				class="btn">
				注册
				</van-button>
  			</div>
		</van-form>
	</div>
</template>

<script>

export default {
	data(){
		return{
			loading:false,
			username:'',
			phone:'',
			code:'',
			password:'',
			yqm:'',
			repwd:'',
			show: true,
			timer: null,
			count:''

		}
	},
	created(){
		this.yqm = this.$route.params.code
		console.log(this.$route)
	},
	mounted(){

	},
	methods:{
		//发送验证码
		async getCode(){
			if (!this.phone) {
				console.log('错误')
				return false
			}
			if(!this.show){
				console.log('错误等等')
				return
			}
			this._getCode()
			//console.log('aaaaa')
			let res = await this.$http.post(this.$api.SendSms,{
				phone:this.phone
			})
		},
		_getCode(){
     		const TIME_COUNT = 60;
     		if (!this.timer) {
       			this.count = TIME_COUNT;
				this.show = false;
				this.timer = setInterval(() => {
       				if (this.count > 0 && this.count <= TIME_COUNT) {
        				this.count--;
        			} else {
						 this.show = true;
						 this.count = ''
         				clearInterval(this.timer);
         				this.timer = null;
        			}
       			}, 1000)
      		}
		},
		//注册
		async onSubmit(values) {
			console.log('submit', values);
			this.loading = true
			let res = await this.$http.post(this.$api.register,{
				name:this.username,
				phone:this.phone,
				code:this.yqm,
				pwd:this.password,
				repwd:this.repwd,
				yzm:this.code
			})
			this.loading = false
			if (res.data.code == 200) {
				window.location.href=res.data.data
			}
		},
	}
}
</script>
<style lang="scss" scoped>
	.home{
		padding: 0.2rem;
		::v-deep .van-cell{
			background-color: transparent;
		}
		::v-deep .van-field__error-message{
			color: #ffffff;
		}
		.btn{
			height: 0.8rem;
			margin-top: 1rem;
		}
		h1{
			font-size: 18px;
			font-weight:600;
			padding: 0.6rem 0.2rem;
			text-align: left;
			color: #ffffff;
		}
		.van-cell{
			height: 1rem;
		}
		::v-deep .van-cell::after{
			border-color: #242539;
		}
		::v-deep .van-field__control{
			color: #ffffff;
		}
	}
</style>